<template>
  <div>
    <!-- 流程管理 -->
    <el-form size="small" :inline="true">
      <el-form-item label="流程标识">
        <el-input v-model="queryParams.key" placeholder="请输入 流程标识" style="width:200px;"></el-input>
      </el-form-item>
      <el-form-item label="流程分类">
        <el-select v-model="queryParams.category" placeholder="请选择 流程分类" style="width:200px;" clearable>
          <el-option label="0" value="0"></el-option>
          <el-option label="1" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-button size="small" class="search_button" type="primary" icon="el-icon-search"
        @click="getFlowList">查询</el-button>
      <el-button size="small" plain class="reset_button" type="info" icon="el-icon-refresh">重置</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%;margin-top:10px" border size="medium">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column prop="" label="#" align="center" width="55"></el-table-column>
      <el-table-column prop="tenantId" label="租户编号" align="center"></el-table-column>
      <el-table-column prop="id" label="流程主键" align="center"></el-table-column>
      <el-table-column prop="key" label="流程标识" align="center"></el-table-column>
      <el-table-column prop="name" label="流程名称" align="center"></el-table-column>
      <el-table-column prop="category" label="流程分类" align="center"></el-table-column>
      <el-table-column prop="version" label="流程版本" align="center"></el-table-column>
      <el-table-column prop="suspensionState" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.suspensionState == 0">挂起</span>
          <span v-if="scope.row.suspensionState == 1">激活</span>
        </template>
      </el-table-column>
      <el-table-column prop="deploymentTime" label="部署时间" align="center" width="170"></el-table-column>
      <el-table-column prop="handle" label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" plain icon="el-icon-refresh" @click="changeState(scope.row)">变更状态</el-button>
          <el-button size="mini" type="text" plain icon="el-icon-view" @click="modelView(scope.row)">流程图</el-button>
          <el-button size="mini" type="text" plain icon="el-icon-delete"
            @click="deleteDeployment(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>

    <el-dialog title="流程图展示" :visible.sync="showXml" width="60%">
      <bpmn-designer style="height: 520px;" :xml.sync="xmlString" />
    </el-dialog>

  </div>
</template>

<script>
import {
  getFlowList, //获取列表
  changeState, //变更状态
  modelView,// 查看流程图
  deleteDeployment,//删除流程
} from '_api/FlowManage/flowManage/index.js'
import { mapGetters } from "vuex";
import BpmnDesigner from "../../../packages/components/Designer";
import { defaultSettings } from "../../../packages/preset-configuration/editor.config";

export default {
  components: { BpmnDesigner },
  props: {
    settings: {
      type: Object,
      default: () => defaultSettings
    }
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        category: "",
        current: 1,
        field: "",
        mode: "",
        order: "",
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      // 删除的id集合
      deploymentIds: [],
      // 弹窗
      showXml: false,
      // xml
      xmlString: undefined,
      editorSettings: this.settings
    }
  },
  computed: {
    ...mapGetters(["getEditorConfig"]),
    ...mapGetters(["getModeler"]),
  },
  methods: {
    // 变更状态
    changeState(e) {
      var state = ""
      if (e.suspensionState == 1) {
        state = 0
      }
      if (e.suspensionState == 0) {
        state = 1
      }
      changeState({ state, processId: e.id }).then(res => {
        if (res.data.success == true) {
          this.$message(res.data.msg)
        }
      })
    },
    // 查看流程图
    modelView(e) {
      var query = { processDefinitionId: e.id }
      modelView(query).then(res => {
        this.xmlString = res.data.data.xml
        this.showXml = true
      })
    },
    // 删除部署流程
    deleteDeployment(e) {
      this.$confirm('此操作将删除该流程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deploymentIds = []
        this.deploymentIds.push(e.id)
        deleteDeployment({ deploymentIds: this.deploymentIds }).then(res => {
          if (res.data.success == true) {
            this.$message({
              message: '删除成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                // this.reset()
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 转换时间
    changeTime(time) {
      var date = new Date(time);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      return (Y + M + D + h + m + s);
    },
    handleCurrentChange(e) {
      //当前页
      this.queryParams.current = e
      this.getFlowList()
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e
      this.getFlowList()
    },
    //获取列表
    getFlowList() {
      getFlowList(this.queryParams).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.tableData.forEach(item => {
            item.deploymentTime = this.changeTime(item.deploymentTime)
          })
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      }).catch(error => {
        // if (error.response.status == 401) {
        //   this.$confirm('登录状态过期, 请重新登录!', '提示', {
        //     confirmButtonText: '确定',
        //     showCancelButton: false,
        //     type: 'warning'
        //   }).then(() => {
        //     this.$router.push('/login')
        //   }).catch(() => {
        //   })
        // }
      })
    }
  },
  created() {
    this.getFlowList()
    this.editorSettings.paletteMode = "custom"
    this.$store.commit('setConfiguration', this.editorSettings)
  },
  mounted() {
    document.body.addEventListener("contextmenu", function (ev) {
      ev.preventDefault();
    });
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}
</style>
